<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Refresh" content="3">
<title>练习</title>
	<style>
		div.static{
			position:static;
			border:3px solid #36E074;
		}
		div.pos_fixed{
			position:fixed;
			border:3px solid #E9F521;
		}
		h2.pos_left{
			position:relative;
			left: -20px;
			border:3px solid #FC0A0E;
		}
		h2.pos_right{
			position:relative;
			left:20px;
			border:3px solid #FC0A0E;
		}
		h2.pos_absolute{
			position:absolute;/*绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>*/
			left:100px;
			top:150px;
			border:3px solid #FC0A0E;
		}
		div.sticky{
			position:-webkit-sticky;
			position:sticky;/*粘性定位，当鼠标滚动浏览器的时候会停留在顶部，滚动回去又会自动收回到原来位置*/
			top:0;
			padding:5px;
			background-color:aqua;
			border:2px solid #E11518;
		}
		#overflowTest{
			background:#69DD31;
			color:white;
			padding:15px;
			width:80%;
			height:100px;
			overflow: scroll;
			border:1px solid #E4850C;
		}
		#overflowTest2{
			background-color:aqua;
			width:200px;
			height:50px;
			border:1px dotted black;
			overflow:visible;
		}
		img{
			float:left;
			display:block;
			margin:0 auto;
		}
		.images{
			margin:auto;
			width:60%;
			border:3px solid #E10D11;
			padding:10px;
		}
		div p{
			backgound-color:yellow;
		}
	</style>
</head>
<body>
	<div>
		<p>段落1，在div中</p>
		<p>段落2，在div中</p>
	</div>
	<p>段落3，不在div中</p>
	<p>段落</p>
	<div class="images">
		<p><img src="../Images/001.png" width="100" height="100"></p>		
	</div>
	<div id="overflowTest2">
		<p>这里的文本内容会溢出元素框</p>
		<p>这里的文本内容会溢出元素框</p>
	</div>
	<div id="overflowTest">
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
		<p>这里的文本内容是可以滚动滚动的，滚动条方向是垂直的</p>
	</div>
	<p>尝试滚动页面</p>
	<p>注意：IE/Edge16 及更早IE版本不支持sticky属性</p>
	<div class="sticky">我是粘性定位</div>
	<div style="padding=bottom:2000px">
        <p>滚动我</p>
		<p>来回滚动我</p>
		<p>滚动我</p>
		<p>来回滚动我</p>
	</div>	
	<h2 class="pos_absolute">绝对定位</h2>
	<p>用绝对定位，一个元素可以放在页面上的任何位置。标题下面防止距离左边的页面</p>
	<h1>这是位于正常位置的标题</h1>
	<h2 class="pos_left">这个标题相对于正常位置向左移动</h2>
	<h2 class="pos_right">这个标题相对于正常位置向右移动</h2>
	<p>相对定位会按照元素的原始位置对该元素进行移动</p>
	<p>样式“left:-20px"从元素的原始左侧位置减去20像素</p>
	<p>央视"left:20px"向元素的原始左侧位置增加20像素</p>
	<h2>position:static</h2>
	<p>使用position:static;定位元素，无特殊定位，遵循正常的文档流对象：从上到下</p>
	<div class="static">改元素使用了position：static</div>
	<div class="pos_fixed">这是个相对于浏览器的固定定位</div>
	<div><p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>

    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
    <p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
    <p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>
	<p>text</p>	<p>text</p></div>

</body>
</html>
